import React, { useEffect, useState } from 'react'
import './messageboard.less'
import { message} from "antd"
import {
    SettingFilled,
    SmileOutlined,
    CommentOutlined
} from '@ant-design/icons';
import { gethost, getconent } from '../../services/index'
const messageboard = () => {
    const [host, sethost] = useState<any>([])
    const [conent, setconent] = useState('')
    useEffect(() => {
        gethost({
            page: 1,
            pageSize: 6
        }).then(ok => {
            sethost(ok.data[0])
        })
    }, [])
    return <div className='cww_wrap'>
        <div className="cww_head">
            <h1>留言板</h1>
            <h3><b>[ 请勿灌水    <SettingFilled />]</b></h3>
        </div>
        <div className="cww_body">
            <h3>评论</h3>
            <div className="cww_body_iptcontent">
                <input type="text" placeholder='请输入评论内容(支持 Markdown)' value={conent} onChange={(e) => {
                    setconent(e.target.value)
                }} />
                <br />
                <div className="cww_body_iptcontent_p">
                    <span>
                        表情
                        <  SmileOutlined />
                    </span>
                    <span>
                        <button onClick={() => {
                            getconent({
                                content: conent,
                                email: "11@qq.com",
                                hostId: "8d8b6492-32e5-44e5-b38b-9a479d1a94bd",
                                name: "卢本伟",
                                url: "/messageboard/messageboard"
                            }).then(ok => {
                                console.log(ok)
                                setconent('')
                                message.success('发布成功',1)
                            })
                        }}>发布</button>
                    </span>
                </div>
            </div>
            <div className="cww_body_plcontent">
                {
                    host.map((item: any) => {
                        return <div className='abc' key={item.id}>
                            <div className="cww_plcontent_left">
                                <div className="toux">
                                    {item.name[0]}
                                </div>
                            </div>
                            <div className="cww_plcontent_right">

                                <p>  <b>{item.name}</b> </p>
                                <div> {
                                    item.html ? <div dangerouslySetInnerHTML={{ __html: item.html }} /> : <div dangerouslySetInnerHTML={{ __html: item.content }} />
                                } </div>
                                <p>{item.userAgent} <span> <CommentOutlined /> 回复</span></p>
                            </div>
                        </div>
                    })
                }
            </div>
        </div>
    </div>
}
export default messageboard